<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="info">
            <image :src="info.image_uri || '../../static/icon/avatar.png'" class="avatar"></image>
            <view class="name">{{ info.nickname || '用户名内容' }}</view>
        </view>
        
        <view class="box-o">
            <view class="top">
                <image src="../../static/icon/g_icon3.png" class="icon3"></image>
                <view class="my-o">我的订单</view>
                <view @click="toPage('/pages/order/order', 0)">全部订单</view>
            </view>
            <view class="ord-box">
            	<view class="wid" @click="toPage('/pages/order/order', 1)">
            		<image src="../../static/icon/g_icon4.png" mode=""></image>
                    <view class="ord-num" :class="{'ord-num2' : count.status_one > 9 }" v-if="count.status_one > 0">
                        {{count.status_one > 99 ? '99+' : count.status_one}}
                    </view>
            		<view class="ord-t">待付款</view>
            	</view>
            	<view class="wid" @click="toPage('/pages/order/order', 2)">
            		<image src="../../static/icon/g_icon5.png" mode=""></image>
                    <view class="ord-num" :class="{'ord-num2' : count.status_two > 9 }" v-if="count.status_two > 0">
                        {{count.status_two > 99 ? '99+' : count.status_two}}
                    </view>
            		<view class="ord-t">待发货</view>
            	</view>
            	<view class="wid" @click="toPage('/pages/order/order', 3)">
            		<image src="../../static/icon/g_icon6.png" mode=""></image>
                    <view class="ord-num" :class="{'ord-num2' : count.status_three > 9 }" v-if="count.status_three > 0">
                        {{count.status_three > 99 ? '99+' : count.status_three}}
                    </view>
            		<view class="ord-t">待收货</view>
            	</view>
            	<view class="wid" @click="toPage('/pages/order/order', 4)">
            		<image src="../../static/icon/g_icon7.png" mode=""></image>
            		<view class="ord-t">已完成</view>
            	</view>
                <view class="wid" @click="toPage('/pages/order/order', 8)">
                	<image src="../../static/icon/g_icon8.png" mode=""></image>
                	<view class="ord-t">售后</view>
                </view>
            </view>
        </view>
        
        <view class="nav">
            <view class="nav-i" @click="toPage(`/pages/balance/balance`)">
                <view>
                    <view>我的余额</view>
                    <view class="see">点击进入</view>
                </view>
                <image src="../../static/image/g_img_3.png" class="img-3"></image>
            </view>
            <view class="nav-i" @click="toPage(`/pages/other/collect`)">
                <view>
                    <view>我的收藏</view>
                    <view class="see">点击进入</view>
                </view>
                <image src="../../static/image/g_img_4.png" class="img-4"></image>
            </view>
        </view>
        <!-- 信息发布 -->
        <image src="../../static/image/g_img_5.png" class="img-5" @click="toPage(`/pages/other/information`)"></image>
        
        <view class="down">
            <view class="item" @click="toPage(`/pages/other/about`)">
                <image src="../../static/icon/g_icon10.png" class="icon10"></image>
                <view>平台介绍</view>
            </view>
            <view class="item" @click="KFshow = true">
                <image src="../../static/icon/g_icon11.png" class="icon10"></image>
                <view>平台客服</view>
            </view>
            <view class="item" @click="toPage(`/pages/rate/rate`)">
                <image src="../../static/icon/g_icon12.png" class="icon10"></image>
                <view>我的评价</view>
            </view>
            <view class="item" @click="toPage(`/pages/address/address`)">
                <image src="../../static/icon/g_icon9.png" class="icon10"></image>
                <view>地址管理</view>
            </view>
            <view class="item" @click="toPage(`/pages/other/info`)">
                <image src="../../static/icon/g_icon13.png" class="icon10"></image>
                <view>个人信息</view>
            </view>
            <view class="item" @click="toPage(`/pages/coupon/coupon`, memberStatus)">
                <image src="../../static/icon/g_icon14.png" class="icon10"></image>
                <view>我的优惠券</view>
            </view>
            <view class="item" @click="toBusiness">
                <image src="../../static/icon/g_icon17.png" class="icon10"></image>
                <view>企业认证</view>
            </view>
        </view>
        
        <u-mask :show="KFshow" mode="center" border-radius="15">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-up">
                        <view>平台客服</view>
                        <image src="../../static/image/service-icon.png" mode=""></image>
                    </view>
                    <view class="pop-call">
                        <view>
                            <view class="school">咨询热线</view>
                            <view class="u-font-34 text-bold">{{ service.shop_phone }}</view>
                        </view>
                        <image src="../../static/image/g_kefu.png" @click="$call(service.shop_phone)"></image>
                    </view>
                    <image src="../../static/icon/close.png" class="pop-del" @click="KFshow = false"></image>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                count: {},
                KFshow: false,
                info: {},
                service: {},//客服
                memberStatus: -1,//-1未认证过企业，0待审核 1通过 2拒绝
            };
        },
        onLoad() {
            
        },
        onShow() {
            if (this.$getSync('userToken')) {
                this.getInfo()
                this.getOrderStatus()
                this.getMemberAutha()
            }
            this.getService()
        },
        methods: {
            toPage(url,num) {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login"
                        })
                    })
                } else {
                    this.$gTo(url+'?type='+ num)
                }
            },
            
            // 去企业信息
            toBusiness() {
                if (!uni.getStorageSync('userToken')) {
                    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login"
                        })
                    })
                } else if (!uni.getStorageSync('MOBILE')) {
                    this.$confirm('您还没有绑定手机号，是否去绑定？',()=>{
                        uni.navigateTo({
                            url: "/pages/login/login?show=1"
                        })
                    })
                } else {
                    if (this.memberStatus == -1) {
                        this.$gTo(`/pages/apply/apply`)
                    } else {
                        this.$gTo(`/pages/apply/fail`)
                    }
                }
            },
            
            // 获取企业信息认证
            getMemberAutha(){
            	this.$ajax('member_auth', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data) {
                            this.memberStatus = ret.data.status
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            getInfo() {
            	this.$ajax('getInfo', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.info = ret.data
                        uni.setStorageSync('MOBILE', ret.data.mobile);
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 获取订单状态
            getOrderStatus() {
            	this.$ajax('orderStatus', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.count = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 获取客服电话
            getService() {
            	this.$ajax('customerService', {
            		
            	}).then(ret => {
            		this.service = ret.data
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f6f6f6;
    }
    .content {
    	padding: 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #009661,#00ae71, #f6f6f6);
    }
    .info{
        padding-left: 20rpx;
        padding-bottom: 35rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .avatar{
        width: 110rpx;
        height: 110rpx;
        border: 2rpx solid #fff;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    .name{
        flex: 1;
        font-size: 36rpx;
        color: #fff;
        word-break: break-all;
        white-space: pre-line;
    }
    
    .box-o{
        background: linear-gradient(to right, #f5d19e, #daac6c);
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 28rpx;
        font-size: 24rpx;
        color: #4e2d17;
    }
    .icon3{
        width: 36rpx;
        height: 37rpx;
        margin-right: 15rpx;
    }
    .my-o{
        flex: 1;
        font-size: 30rpx;
        font-weight: bold;
    }
    .ord-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 55rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .wid {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        
    	image {
    		width: 46rpx;
    		height: 46rpx;
    		margin-bottom: 10rpx;
    	}
        
        .ord-num{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 5rpx 8rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
        .ord-num2{
            font-size: 22rpx;
            line-height: 1;
            color: #fff;
            padding: 6rpx 4.5rpx;
            background-color: #fa3c07;
            border-radius: 50%;
            position: absolute;
            right: -10rpx;
            top: -10rpx;
        }
    	.ord-t {
    		font-size: 25rpx;
    	}
    }
    
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }
    .nav-i{
        width: 345rpx;
        padding: 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-weight: bold;
    }
    .see{
        font-size: 26rpx;
        font-weight: normal;
        color: #666666;
        padding-top: 8rpx;
    }
    .img-3{
        width: 84rpx;
        height: 84rpx;
    }
    .img-4{
        width: 70rpx;
        height: 85rpx;
    }
    .img-5{
        width: 697rpx;
        height: 156rpx;
        margin: 0 auto 20rpx;
    }
    
    
    .down{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 40rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .item{
        width: calc(710rpx / 4);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        padding-bottom: 40rpx;
    }
    .icon10{
        width: 68rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
    }
    
    // 客服弹窗
    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 77vw;
        background-color: #ffffff;
        border-radius: 20upx;
        position: relative;
        background: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
    }
    .pop-up {
        width: 77vw;
        height: 166upx;
        background: linear-gradient(to right, #01744d, #66cba9);
        color: #fff;
        border-top-left-radius: 10upx;
        border-top-right-radius: 10upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding-left: 55upx;
        padding-right: 24upx;
        position: relative;
    }
    .school{
        font-size: 22rpx;
        padding-top: 5rpx;
    }
    .pop-up > view {
        font-size: 40upx;
        color: #ffffff;
    }
    .pop-up > image {
        font-size: 40upx;
        color: #ffffff;
        width: 290upx;
        height: 207upx;
        position: absolute;
        bottom: 0;
        right: 24upx;
    }
    .pop-call {
        width: 66vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 30upx 0;
        margin: 0 auto;
        font-weight: bold;
    
        image {
            width: 155rpx;
            height: 56rpx;
        }
    }
    .pop-del {
        width: 8vw;
        height: 8vw;
        position: absolute;
        left: 35vw;
        bottom: -100upx;
    }

</style>
